<template>
  <el-dialog :close-on-click-modal='false' :v-if="dialogVisible" :visible.sync="dialogVisible" width="1000px" v-drag append-to-body @close="close">
    <template slot="title">
      <span style="line-height: 24px;font-size: 18px;color: #303133;">{{$t('全局配置')}}</span>
      <b style="color:red;padding-left: 30px;">{{$t('修改全局配置会造成短暂丢包，请谨慎配置！')}}</b>
    </template>
    <el-table size='smail' ref="multipleTable" :show-header="false" :border="true" :data="tableData" tooltip-effect="dark" style="width: 100%">
      <el-table-column min-width="200">
        <template slot-scope="scope">
          <span style="font-weight: 600;">{{ scope.row.title }}</span>
          <span>({{ scope.row.tip }})</span>
          <span style="color:red;">{{ scope.row.warning }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="50">
        <template slot-scope="scope">
          <el-input v-emoji v-model="record[scope.row.title]" ref="title" size="mini">
            <template slot="append" v-if="scope.row.title === 'rekeyfuzz'">%</template>
            <template slot="append" v-if="['keylife','rekeymargin','ikelifetime'].includes(scope.row.title)">{{$t('秒')}}</template>
          </el-input>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit()" class="addSubmit">{{$t('确 定')}}</el-button>
      <el-button @click="close()" class="addClose">{{$t('取 消')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getGlobalInfo, setGlobalInfo } from '@/api/network/ipsecvpn'
import { inputClass } from '@/utils/input-class.js'
export default {
  name: 'globalDialog',
  data () {
    return {
      dialogVisible: false,
      tableData: [
        { title: 'keylife', tip: this.$t('Ipsec SA存活时间,有效范围是:30-86400秒'), warning: '' },
        { title: 'rekeymargin', tip: this.$t('Ipsec/IKE SA到期前多长时间进行秘钥协商,有效范围是 :大于1且小于keylife的一半'), warning: '' },
        { title: 'rekeyfuzz', tip: this.$t('rekeymargin随机增大的百分比,有效范围是:0-100'), warning: '' },
        { title: 'ikelifetime', tip: this.$t('IKE SA存活时间,有效范围是:30-86400秒,且大于keylife'), warning: this.$t('ikelifetime与keylife差距过小（如5s）会造成丢包') },
        { title: 'keyingtries', tip: this.$t('协商尝试次数,有效范围是:1-10'), warning: '' },
        { title: 'mtu', tip: this.$t('虚拟接口mtu,有效范围是:68-9216'), warning: '' }
      ],
      record: {
        ikelifetime: '',
        keyingtries: '',
        keylife: '',
        rekeyfuzz: '',
        rekeymargin: '',
        mtu:''
      },
      recordCopy: {
        ikelifetime: '',
        keyingtries: '',
        keylife: '',
        rekeyfuzz: '',
        rekeymargin: '',
        mtu:''
      }
    }
  },
  methods: {
    init () {
      this.dialogVisible = true
      this.$nextTick(() => {
        const data = ['title']
        inputClass(this.$refs, data)
      })
      getGlobalInfo().then(res => {
        if (res.status === 0) {
          this.record = res.info[0]
        }
      })
    },
    submit () {
      setGlobalInfo(this.record).then(res => {
        if (res.status === 0) {
          this.$message({
            message: this.$t('全局配置设置成功'),
            type: 'success'
          })
          this.close()
        }
      })
    },
    close () {
      this.dialogVisible = false
      this.record = Object.assign({}, this.recordCopy)
    }
  }
}
</script>
<style lang="less" scoped>
.el-form-item__content {
  line-height: 28px;
}
.el-form-item {
  margin-bottom: 0;
}
</style>
